<template>
  <div class="buysteps container">
    <el-steps :active="activenum" finish-status="success" simple style="margin-top: 8px;font-size: 14px">
      <el-step title="完成订单信息"></el-step>
      <el-step title="收银台" ></el-step>
    </el-steps>
    <div class="dd-info">
      <div class="dz">
        <p>配送地址 <span @click="goaddaddress()">添加地址</span></p>
        
        <div class="dzlist" v-for="(item,index) in dzlist.rows">
            <label class="demo--label" @change="lala(index)">
                <input class="demo--radio" type="radio" name="demo-radio">
                <span class="demo--radioInput"></span>
            </label>
            <div class="dzlist-r">地址：{{item.address}}<br/>联系电话：{{item.phone}}<br/> 联系人：{{item.name}}</div>
        </div>
        <div v-show="!dzlist.rows.length" class="nonedz">还没有添加收货地址哦~ 请点击上面的地址</div>
      </div>
      <div class="qrddxx">
        <p class="p-head">确认订单信息</p>
        <div class="order-box">
          <div class="order-box-head">
            <div class="td">商品</div>
            <div class="td">规格</div>
            <div class="td">单价</div>
            <div class="td">数量</div>
            <div class="td">小计</div>
          </div>
          <div class="order-box-body">
            <div class="tr" v-for="(item,index) in order">
              <!-- <router-link :to="{name:'freshDetail', params:{cpid: item.g_id}}" class="td">
                <img class="img" :src="item.imgsrc"><div class="p-name"><p>{{item.name}}</p></div>
              </router-link> -->
              <div class="td">
                <img class="img" :src="comimgsrc+item.preview"><div class="p-name"></div>
              </div>
              <div class="td-r">
                <p class="title">{{item.name}}</p>
                <p class="gg">规格：{{item.unit}}</p>
                <p class="gg">单价：<span>￥{{item.price | numFilter}}</span> × {{item.quantity}}</p>
                <p class="gg">小计：<span>￥{{item.total | numFilter}}</span></p>
              </div>
            </div>
            <div class="down-zj">
              <p>商品金额：{{spje | numFilter}}</p>
              <p>运费：{{yunfei | numFilter}}</p>
              <p>总计金额：{{zjg | numFilter}}</p>
              <div class="suborder" @click="subbutton()">提交订单</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ban1 from '@/assets/image/ban1.jpg';
import cp1 from '@/assets/image/cp1.jpg';
import qs from "qs"
import store from '@/vuex/store'
export default {
  name: 'App',
  data(){
    return{
      radio2: '',
      cp1,
      number: 1,
      activenum:0,
      showbox:false,
      xxdz:'',
      lxdh:'',
      lxr:'',
      zdz:'',
      adr:'',
      sheng:'',
      dzlist:{},
      order:[],
      comimgsrc:'http://api.mountainfreshes.com',
      adr:'',
      zjg:0,
      spje:0,
      ddhao:'',
      dzid:'',
      yunfei: 0,
      shengfen:'',
      yunfeishuoming:[]
    }
  },
  methods:{
    goaddaddress:function(){
      this.$router.push({ name: 'addaddress'})
    },
    getaddress: function(){
      
      this.$http.post("/index.php/user/address/index",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          user_id: this.$store.state.userid

      }))
      .then(res => {
        this.dzlist = res.data
        console.log(this.dzlist)
        // for (let item in this.dzlist.rows){
        //   if(this.dzlist.rows[item].default == 1){
        //     this.radio2=this.dzlist.rows[item].id
        //     this.dzid = this.dzlist.rows[item].id
        //     this.shengfen = this.dzlist.rows[item].region_mergename

        //   }

        // }
      })
      .catch(error => {
        alert("网络错误")
      });
    },
    lala:function(index){
      this.shengfen = this.dzlist.rows[index].region_mergename
      this.dzid = this.dzlist.rows[index].id
      if(this.shengfen == '四川省'){
        let aa = this.yunfeishuoming[0].value
        this.yunfei = parseInt(aa)
      }else{
        let bb = this.yunfeishuoming[1].value
        this.yunfei = parseInt(bb)
      }
      this.all()

    },
    getcplist:function(){
      this.ddhao = this.$route.query.cplist;
      console.log(this.$route.query.cplist)
      let idd = this.$route.query.cplist;
      this.$http.post("/index.php/user/order/get_order",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          order_number: idd

      }))
      .then(res => {
        this.order = res.data.row
        console.log(res.data.row)
        this.yunfeishuoming = res.data.mail
        console.log(this.yunfeishuoming)
        this.all();
      })
      .catch(error => {
        alert("网络错误")
      });
    },
    subnum:function(e){
      if(this.order.orderList[e].num == 1){
        this.order.orderList[e].num
        this.order.orderList[e].little = this.order.orderList[e].num * this.order.orderList[e].price
        this.all()
      }else{
        this.order.orderList[e].num--
        this.order.orderList[e].little = this.order.orderList[e].num * this.order.orderList[e].price
        this.all()
      }
    },
    addnum:function(e){
      this.order.orderList[e].num++
      this.order.orderList[e].little = this.order.orderList[e].num * this.order.orderList[e].price
      this.all()
    },
    all:function(){
      this.spje = 0;
      this.zjg = 0;
      console.log(this.order.length)
      for (var i = 0; i<this.order.length; i++){
         this.spje = this.spje + this.order[i].total
      }
      this.zjg = (this.spje*100 + this.yunfei*100)/100
      console.log(this.spje)
      console.log(this.zjg)
    },
    subbutton:function(){
        // this.activenum=1;
        if(this.dzid == ''){
          alert('请选择收货地址')
        }else{
          this.$http.post("/index.php/user/order/confirmation_order",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
              order_number: this.ddhao,
              total: this.spje,
              receive: this.dzid,
              mail: this.yunfei
          }))
          .then(res => {
            console.log(res)
            this.$router.push({ path: '/buypage',query:{ddh: this.ddhao,ddjg: this.zjg} })
          })
          .catch(error => {
            alert("网络错误")
          });
          this.$http.post("/index.php/user/cart/index",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid

              }))
              .then(res => {
                this.$store.state.shopcartnum = res.data.row.length
                
              })
              .catch(error => {
                alert("网络错误")
              });
        }
        
    }
  },
  components:{
  },
  computed:{
      
  },
  filters: {
    numFilter(value) {
      // // 截取当前数据到小数点后三位
      let transformVal = Number(value).toFixed(3)
      let realVal = transformVal.substring(0, transformVal.length - 1)
      // num.toFixed(3)获取的是字符串
      return Number(realVal)
      // value = Number(value)
      // return value.toFixed(2)
    }
  },
  created(){
    this.getcplist();
    this.getaddress();
    
    this.all();
    this.lala();
  },
  watch:{
    '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                
                if(to.path == '/buystep'){
                  this.getcplist()
                  this.getaddress()
                  
                  this.all()
                  this.lala()
                }
              }
  }
}
</script>

<style scoped lang="less">
.buysteps{
  margin-top: 3px;
  height: auto;
  zoom: 1;
  overflow: hidden;
  .el-step.is-simple .el-step__title{
      font-size: 14px !import;
  }
}
.dd-info{
    margin-top: 6px;
    height: auto;
    zoom: 1;
    overflow: hidden;
    padding: 0 .2rem;
    text-align: left;
    .qrddxx{
      width: 100%;
      height: auto;
      zoom: 1;
      overflow: hidden;
      margin-top: 10px;
      text-align: left;
      .p-head{
        font-size: .24rem; 
        color: #3a3a3a;
        line-height: .4rem;

      }
      .order-box{
        width: 100%;
        height: auto;
        zoom: 1;
        overflow: hidden;
        margin: auto;
        margin-top: 4px;
        .order-box-head{
          display: none;
          width: 100%;
          height: 42px;
          background: #f0f0f0;
          box-sizing: border-box;
          border: 1px solid #868686;
          .td{
            width: 17.5%;
            float: left;
            height: 100%;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color: #3a3a3a;
            &:first-child{
              width: 30%;
            }
          }
        }
        .order-box-body{
          width: 100%;
          height: auto;
          zoom: 1;
          overflow: hidden;
          .tr{
            width: 100%;
            height: 1.48rem;
            margin-top: 10px;
            .td{
              width: 2rem;
              float: left;
              height: 100%;
              text-align: center;
              font-size: 14px;
              color: #3a3a3a;
              .img{
                float: left;
                width: 100%;
                height: 100%;
              }
            }
            .td-r{
              width: 3.9rem;
              float: right;
              height: 100%;
              .title{
                width: 100%;
                display: block;
                height: .4rem;
                line-height: .4rem;
                font-size: .24rem;
              }
              .gg{
                width: 100%;
                height: .32rem;
                line-height: .32rem;
                font-size: .22rem;
                margin-top: .05rem;
                span{
                  font-weight: bold;
                  color: #3fa33a; 
                  font-size: .23rem;
                }
              }
            }
          }
          .down-zj{
            width: 100%;
            margin-top: 14px;
            p{
              font-size: 0.24rem;
              color: #3fa33a;
              text-align: right;
            }
            .suborder{
              width: 1.8rem;
              height: 0.66rem;
              float: right;
              cursor: pointer;
              background: #3fa33a;
              color: #fff;
              text-align: center;
              line-height: .66rem;
              margin-top: 0.16rem;
              border-radius: 6px;
              margin-bottom: 20px;
            }
          }
        }
      }
    }
    .dz{
      width: 100%;
      height: auto;
      zoom: 1;
      overflow: hidden;
      margin: auto;
      border-bottom: 1px dashed #aaaaaa;
      padding-bottom: 8px;
      p{
        font-size: .24rem; 
        color: #3a3a3a;
        line-height: 30px;

        span{
          color: #42a43d;
          padding-left: 20px;
          cursor: pointer;
        }
      }
      .nonedz{
        font-size: 14px;
        color: #3fa33a;
        font-weight: bold;
        line-height: 40px;
      }
      .item{
        font-size: 14px;
        margin-top: 14px;
        .el-radio__inner{
          border: 1px solid #939496;
        }
      }
    }
}
.num{
        width: 110px;
        height: 28px;
        margin: auto;
        .btn{
          float: left;
          width: 28px;
          height: 28px;
          cursor: pointer;
          text-align: center;
          line-height: 26px;
          background: #c2c2c2;
        }
        input{
          display: block;
          width: 54px;
          float: left;
          border: none;
          text-align: center;
          font-size: 14px;
          color: #090909;
          background: #eaeaea;
          height: 26px; 
        }
      }
.showbox{
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0,0,0,.8);
  left: 0;
  top: 0;
  z-index: 9999;
  .box{
    position: absolute;
    width: 680px;
    height: 440px;
    background: #fff;
    border-radius: 8px;
    left: 50%;
    margin-left: -340px;
    top: 50%;
    margin-top: -220px;
    .head{
      width: 100%;
      height: 48px;
      text-align: center;
      span{
        line-height: 48px;
        font-size: 16px;
        color: #212121;
        padding-left: 40px;
      }
      .close{
        text-align: right;
        font-size: 20px;
        color: #c12c2c;
        float: right;
        line-height: 48px;
        font-weight: bold;
        padding-right: 20px;
        cursor: pointer;
      }
    }
    .item{
      width: 90%;
      margin: 0px 5% 14px;
      label{
        margin-bottom: 8px;
        display: block;
        font-size: 14px;
      }
      input{
        display: block;
        width: 312px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.15);
        text-indent: 10px;
        font-size: 1rem;
        color: #464a4c;
        border-radius: 4px;
      }
    }
  }
}
.dzlist{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin-top: .14rem;
  .dzlist-r{
    width: -webkit-calc(~'100% - 32px');
    width: -moz-calc(~'100% - 32px');
    width: calc(~'100% - 32px');
    float: right;
  }
}
.demo--label{float: left;}
.demo--radio{display:none}
.demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:22px;margin-right:10px;margin-top:-1px;vertical-align:middle;width:22px;line-height:1;box-sizing: border-box;}
.demo--radio:checked + .demo--radioInput:after{background-color:#00A1E9;border-radius:100%;content:"";display:inline-block;height:10px;margin-left:5px;margin-top:5px;width:10px}
.demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}
.demo--radio:checked + .demo--radioInput{border:1px solid #00A1E9;}

</style>
